<template>
  <div>
    <p>日均充值折线图</p>
    <div id="recharge" :style="{width: '100%', height: '300px'}" />
  </div>
</template>
<script>
import Vue from 'vue'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
export default {
  name: 'Hello',
  props: ["message6"],
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  watch: {
    message6: function(newVal, oldVal) {
      let time = [];
      let num = [];
      newVal.map(function(value, index) {
        time.push(value.dateTime)
        num.push(value.total)
      });
      this.drawLine(time,num);
    }
  },
  methods: {
    drawLine(t,n) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('recharge'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['充值金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: t
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '充值金额',
            type: 'line',
            stack: '总量',
            data: n
          }
        ]
      })
    }
  }
}
</script>
